<template>
    <div>
        <div class="btns">
        <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>  
      </div>
       <div class="table_control">

        <!-- 表单 -->
        <el-table
        :data="userrole"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="顺序"
          width="180">
        </el-table-column>
        <el-table-column
          prop="userId"
          label="用户编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="roleId"
          label="职位编号"
          width="180">
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
</template>
<script>
import { get ,del} from '@/utils/request'
export default {
    data(){
        return {
            userrole:[],
        }
    },
    methods:{

        //删除的处理函数
        deleteHandler(row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let url = "http://localhost:8888/UserRole/deleteById"

            del(url,{id:row.id}).then(resp =>{
            // console.log(resp);
            // 1. 提示
            this.$message({type:"success",message:resp.message});
            // 2. 刷新
            this.LoadBaseuser();
            })
        })
        },

        // 修改的处理函数
        editHandler(row){
        this.$router.push({ 
            path:"/hyz/userroleform" ,
            query:row
        })
        },

        // 查询所有的用户的数据
        LoadUserRole(){
        let url = "http://localhost:8888/UserRole/query"
        get(url).then(resp => {
            // 获取数据之后做的事情
            // console.log(resp);
            this.userrole = resp.data;
        })
        },
        //新增跳转
        toFormHandler(){

        this.$router.push({ path:"/hyz/userroleform" })
        }
    },
    created(){
        this.LoadUserRole();
    }
    
}
</script>

<style lang="sass" scoped>



</style>
